<template>
	<view>
		<view class="button-sp-area">
			<button class="mini-btn" style="margin: 20px;" type="primary" size="mini" @click="godd()">我的工单</button>
		</view>
		<view class="uni-padding-wrap">
			<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
				<uni-forms-item label="楼栋" required name="bxld">
					<uni-data-picker placeholder="请选择楼栋" popup-title="请选择楼栋" :localdata="dataTree"
						@change="onchange">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="房间号" required name="fjh">
					<uni-easyinput v-model="valiFormData.fjh"/>
				</uni-forms-item>
				<uni-forms-item label="报修项目" required name="bxxm">
					<uni-data-picker v-model="valiFormData.bxxm" placeholder="请选择项目" popup-title="请选择项目" :localdata="dataTreeb"
						@change="onchangeb">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item required  name="datetimesingle" label="维修时间">
					<uni-datetime-picker type="datetime" v-model="valiFormData.datetimesingle"/>
				</uni-forms-item>
				<uni-forms-item label="描述" required name="bxms">
					<uni-easyinput type="textarea" v-model="valiFormData.bxms"/>
				</uni-forms-item>
				<uni-forms-item label="姓名" required name="xm">
					<uni-easyinput v-model="valiFormData.xm"/>
				</uni-forms-item>
				<uni-forms-item label="电话" required name="bxdh">
					<uni-easyinput v-model="valiFormData.bxdh"/>
				</uni-forms-item>
				<uni-section title="图片上传" type="line">
					<uni-file-picker 
						ref="files"
						:auto-upload="false"
						:sizeType="sizeType"
						v-model="imageValue"  
						file-mediatype="image"
						:image-styles="imageStyles"
						mode="grid"
						file-extname="png,jpg,webp,bmp"
						:limit="9"
						@progress="progress" 
						@success="success" 
						@fail="fail" 
						@select="select"
					/>
					<button v-if="imabtn" style="margin: 10px;" class="btnaaa" type="primary" @click="upload00">上传</button>
				</uni-section>
				<button style="margin: 10px;" type="primary" @click="submit('valiForm')">提交</button>
			</uni-forms>
		</view>
	</view>
</template>


<script>
	var _this;
	var vk = uni.vk;
	import UniDatetimePicker from "@/pages_bd/components/uni-datetime-picker/uni-datetime-picker";	
	import uniForms from "@/pages_bd/components/uni-forms/uni-forms";
	import uniFormsItem from "@/pages_bd/components/uni-forms-item/uni-forms-item";
	import uniFilePicker from "@/pages_bd/components/uni-file-picker/uni-file-picker";
	import UniDataPicker from "@/pages_bd/components/uni-data-picker/components/uni-data-picker/uni-data-picker";
	export default {
		components:{UniDatetimePicker,uniForms,uniFormsItem,uniFilePicker,UniDataPicker},
		data() {
			// 页面数据变量
			return {
				imabtn:false,
				imageStyles:{
					border:{
						color:"#2F4056"
					}
				},
				imageValue:[],
				sizeType:['compressed'],
				userinfo:{},
				dataTree:[],
				dataTreeb:[],
				valiFormData:{},
				options:{},
				// 校验规则
				rules: {
					bxld: {
						rules: [{
							required: true,
							errorMessage: '楼栋'
						}]
					},
					bxxm: {
						rules: [{
							required: true,
							errorMessage: '请选择项目'
						}]
					},
					fjh: {
						rules: [{
							required: true,
							errorMessage: '请填写房间号'
						},{
							minLength: 2,
							maxLength: 10,
							errorMessage: '房间号长度在 {minLength} 到 {maxLength} 个字符'
						}]
					},
					bxms: {
						rules: [{
							required: true,
							errorMessage: '描述'
						},{
							minLength: 1,
							maxLength: 200,
							errorMessage: '描述长度在 {minLength} 到 {maxLength} 个字符'}]
					},
					datetimesingle: {
						rules: [{
							required: true,
							errorMessage: '请选择维修时间'
						}]
					},
					xm: {
						rules: [{
							required: true,
							errorMessage: '姓名'
						},{
							minLength: 2,
							maxLength: 10,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'}]
					},
					bxdh: {
						rules: [{
							required: true,
							errorMessage: '电话'
						},
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '请输入正确电话号码'
						}]
					}
				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			_this = this;
			vk = uni.vk;
			// this.options = options;
			// this.init(options);
			await this.getldlist()
			await this.getGsxyxybxxmglInfoListb()
			this.userinfo.avatar = vk.getVuex('$user.userInfo.avatar')
			this.userinfo.nickname = vk.getVuex('$user.userInfo.nickname')
			this.userinfo._id = vk.getVuex('$user.userInfo._id')
			this.userinfo.openid = vk.getVuex('$user.userInfo.wx_openid.mp-weixin')
			//console.log(this.userinfo)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			godd(){
				vk.navigateTo('/pages_bd/xybx/xybxsygdjd');
				//console.log('xxx')
			},
			addxybxgd(){
				_this.valiFormData.userinfo = _this.userinfo;
				vk.callFunction({
				  url: 'client/gsxy/xybx/pub/xybxapi.addxybxgd',
				  title: '请求中...',
				  data: {
				    ..._this.valiFormData
				  },
				  success: (data) => {
				    //console.log(data)
					vk.redirectTo('/pages_bd/xybx/xybxsygdjd')
				  },
				  fail (fail){
					  console.log(fail)
				  }
				});
			},
			onchangeb(e) {
				let temp = ''
				for (let s of e.detail.value) {
					temp+=s.text
				}
				_this.valiFormData.bxxm = temp
				//console.log(_this.valiFormData.bxxm);
			},
			onchange(e) {
				// detail value
				let temp = ''
				//console.log('---------onchange:', e.detail.value);
				for (let s of e.detail.value) {
					temp+=s.text
				}
				_this.valiFormData.bxld = temp
				
				//console.log(_this.valiFormData);
			},
			getGsxyxybxxmglInfoListb(){
				return vk.callFunction({
				  url: 'client/gsxy/xybx/pub/xybxapi.getGsxyxybxxmglInfoListb',
				  title:'请求中...',
				  data:{}
				}).then((data) => {
					//console.log(data)
				 _this.dataTreeb = data.treeData
				}).catch((err) => {
				  
				});
			},
			getldlist(){
				return vk.callFunction({
				  url: 'client/gsxy/xybx/pub/xybxapi.getldlist',
				  title:'请求中...',
				  data:{}
				}).then((data) => {
				  _this.dataTree = data.dataTree
				}).catch((err) => {
				  
				});
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('res', res);
					_this.valiFormData.bxld += _this.valiFormData.fjh
					//输入内容
					_this.addxybxgd();
					
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 页面数据初始化函数
			init(options){
				//vk.reLaunch("/pages_template/uni-id/index/index");
			},
			pageTo(path){
				vk.navigateTo(path);
			},
			async upload00(){
				await this.$refs.files.upload()
			},
			select(e){
				//console.log(e)
				this.imabtn = true
			},
			progress(e){
				//console.log(e)
			},
			fail(e){
				//console.log(e)
			},
			success(e){
				//uni.showToast({title:"上传完毕", icon:"none"});
				//console.log(e)
				//this.fccc = true
				_this.imageValue.forEach(item =>{
					delete item.extname
					delete item.fileType
					delete item.image
					delete item.fileID
					delete item.name
					delete item.size
					delete item.path
					delete item.uuid
					delete item.status
					delete item.cloudPath
				})
				let tempimgs = []
				for (let s of _this.imageValue) {
					tempimgs.push(s.url)
				}

				_this.valiFormData.imgs = tempimgs
				//console.log(_this.imageValue)
			}
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss" scoped>
	.btnaaa{
		margin-bottom: 20px;
	}
	
</style>